<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div id="box1"></div>
		<script type="text/javascript">
			var box1 = document.getElementById("box1")
			window.onmousemove = function(){
				//解决兼容性的问题
				alert(typeof event)
				event = event || window.event 
				//获取坐标
				// var left = event.clientX;
				// var top = event.clientY;
				//我们不能使用可见窗口坐标，因为div的偏移量是相对于整个窗口的 
				//我们应该使用pageX和pageY来获取鼠标相对于当前页面的坐标
				//这两个属性在ie8中不支持，如果需要兼容ie8，则不能使用
				var left = event.pageX;
				var top = event.pageY;
				var st = document.body.scrollTop || document.documentElement.scrollTop;
				var sl = document.body.scrollWidth || document.documentElement.scrollWidth;
				//设置div的偏移量
				box1.style.left = left+sl+"px";
				box1.style.top = top+st+"px";
				// alert(1);
			}
		</script>
	</body>
</html>
